<template>
	<view class="content-area u-padding-20 u-padding-top-60 ">
		<view class="row row-between u-padding-bottom-20">
			<view class="title xxl font-weight-500 u-padding-left-20">评论</view>
			<u-button  v-if="commentList.length >= 0" type="primary" size="mini" :custom-style="{
				marginRight:'20rpx',
				borderRadius:'10rpx',
				background: '#6BB2FF'
			}" @click="replyComment(null,0)">写评论</u-button>
		</view>
		<view v-if="commentList.length <= 0" class="mt20">
			<u-empty text="暂无评价" mode="message"></u-empty>

			<view class="mt20 u-text-center">
				<u-button  type="primary" size="mini" :custom-style="{
					marginRight:'20rpx',
					borderRadius:'10rpx',
					background: '#6BB2FF'
				}" @click="replyComment(null,0)">写评论</u-button>
			</view>
		</view>
		<view v-else class="comment" v-for="(res, index) in commentList" :key="res.id">
			<view class="left"><u-avatar :src="res.user.avatar" :size="50" mode="square"></u-avatar></view>
			<view class="right">
				<view class="top">
					<view class="row xs">
						<view class="name">{{ res.user.nickname }}</view>
						<view class="ml20 u-color-666666" >{{ res.create_time }}</view>
					</view>
					
					<view class="row xxs">
						<view class="reply mr10 u-color-666666" @click="replyComment(res,1)">回复</view>
						<view class="like" :class="{ highlight: res.is_like }">
							<view class="num u-color-666666">{{ res.like }}</view>
							<u-icon v-if="!res.is_like" name="thumb-up" :size="22" color="#666"
								@click="getLike(res,index,null)"></u-icon>
							<u-icon v-if="res.is_like" name="thumb-up-fill" :size="22" @click="getLike(res,index,null)"></u-icon>
						</view>
					</view>
				</view>
				<view class="row u-padding-top-10 u-padding-bottom-10" v-if="type == 2">
					<u-icon v-if="res.user_business_card.company_city" name="map" color="#666" size="24" :label-size="24" :label="res.user_business_card.company_city"></u-icon>
					<view v-if="res.user_business_card.position" :class="{'u-border-left':'res.user_business_card.company_city'}" class="xs u-color-666666 u-margin-left-10 u-padding-left-10">{{res.user_business_card.position}}</view>
				</view>
				<view class="content xs">{{ res.content }}</view>
				<view class="reply-box">
					<view class="item" v-for="(val, i) in res.sons" :key="i">
						<view class="row row-between">
							<view class="row">
								<u-avatar :src="val.user.avatar" :size="30" mode="square"></u-avatar>
								<view class="row xs">
									<view class="name ml10">{{ val.user.nickname }}</view>
									<view class="ml20 u-color-666666">{{ val.create_time }}</view>
								</view>
							</view>
							<view class="row xxs">
								<view class="reply mr10 u-color-666666" @click="replyComment(val,2)">回复</view>
								<view class="like row" :class="{ highlight: val.is_like }">
									<view class="num u-color-666666">{{ val.like }}</view>
									<u-icon v-if="!val.is_like" name="thumb-up" :size="22" color="#666"
										@click="getLike(val,index,i)"></u-icon>
									<u-icon v-if="res.is_like" name="thumb-up-fill" :size="22"
										@click="getLike(val,index,i)"></u-icon>
								</view>
							</view>
						</view>
						<view class="row u-padding-top-10 u-padding-bottom-10 u-margin-left-40" v-if="type == 2">
							<u-icon v-if="res.user_business_card.company_city" name="map" color="#666" size="24" :label-size="24" :label="res.user_business_card.company_city"></u-icon>
							<view v-if="res.user_business_card.position" :class="{'u-border-left':'res.user_business_card.company_city'}" class="xs u-color-666666 u-margin-left-10 u-padding-left-10">{{res.user_business_card.position}}</view>
						</view>
						<view class="text xs u-margin-left-40 row">
							<text class="primary u-padding-right-10" v-if="val.parent_user.nickname">@{{val.parent_user.nickname}} : </text>
							<text>{{ val.content }}</text>
						</view>
					</view>
					<view class="all-reply xs" @tap="toAllReply(res,index)"
						v-if="res.sons.length > 0 && res.count - res.sons.length > 0">
						{{ res.count - 1 }}条回复
						<u-icon class="more" name="arrow-down" :size="22"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="publishCommentPopupStatus"  mode="bottom" border-radius="14" :mask-close-able="false" :safe-area-inset-bottom="true" :closeable="true">
			<view class="xl bold u-padding-30">发表评论</view>
			<view class="u-padding-top-10 u-margin-left-20 u-margin-right-20 u-margin-bottom-20">
				<u-input v-model="comment" type="textarea" :height="150" :custom-style="{
					padding:'20rpx',
					background:'#eee',
					borderRadius:'10rpx'
				}" :placeholder="placeholder"  />
				
				<u-button type="primary" :custom-style="{
					width:'100%',
					margin: '40rpx auto 0',
					borderRadius:'100rpx',
					background: '#6BB2FF'
				}" @click="publish">发表</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from '@/utils/tools'
	import {
		commentLike,
		publishComment,
		queryCommentLists
	} from '@/api/user'
	export default {
		props: {
			type: {
				type: Number,
				default: 0
			},
			id: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				page: 1,
				comment:'',
				commentList:[],
				nowSelectData:null,
				status: loadingType.LOADING,
				publishCommentPopupStatus:false,
				placeholder:'善语结善缘，恶言伤人心',
			};
		},
		created() {
			this.queryCommentListsFun();
		},
		methods: {
			queryCommentListsFun() {
				let {
					id,
					type,
					page,
					commentList,
					status
				} = this;
				loadingFun(queryCommentLists, page, commentList, status, {
					type: type,
					id: id,
					page_no: page
				}).then(res => {
					if (res) {
						this.page = res.page;
						let d = res.dataList;
						d.forEach((v, k) => {
							d[k].sons = [];
							if (d[k].sonParameters == undefined) {
								d[k].sonParameters = {
									page: 1,
									status: loadingType.LOADING,
								}
								if(v.son != null)d[k].sons.push(v.son)
							}
						})
						
						this.commentList = d
						this.status = res.status
					}
				})
			},
			toAllReply(e, i) {
				if (this.commentList[i].sonParameters.status == loadingType.LOADING) {
					queryCommentLists({
						type: this.type,
						id: this.id,
						frist_id: e.id,
						page_no: this.commentList[i].sonParameters.page
					}).then((res) => {
						let e = res.data.list;
						if (parseInt(this.commentList[i].sonParameters.page) == 1) {
							this.commentList[i].sons = [];
						}
						e.forEach((v, k) => {
							this.commentList[i].sons.push(v);
						})

						if (this.commentList[i].sons.length > this.commentList[i].count) {
							this.commentList[i].sonParameters.status = loadingType.FINISHED;
						} else {
							this.commentList[i].sonParameters.page += 1;
						}
					})
				}
			},
			async publish(){
				let {
					id,
					type,
					comment,
					nowSelectData
				} = this;
				
				let pid = 0;
				let frist_id = 0;
				
				if(nowSelectData.d != null){
					pid = nowSelectData.d.id;
					
					if(nowSelectData.d && nowSelectData.d.frist_id == 0){
						frist_id = nowSelectData.d.id
					}else{
						frist_id = nowSelectData.d.frist_id
					}
				}
				
				let {
					code,
					data
				} = await publishComment({
					type,
					id,
					pid:pid,
					frist_id:frist_id,
					content:comment
				})
				
				if(code == 1){
					this.publishCommentPopupStatus = false;
					this.$u.toast('发表成功');
					this.clearData();
					this.queryCommentListsFun();
				}
			},
			clearData(){
				this.page = 1;
				this.commentList = [];
				this.nowSelectData = null;
				this.status = loadingType.LOADING;
			},
			replyComment(d,i){
				this.publishCommentPopupStatus = true;
				this.nowSelectData = {
					d,i
				}
			},
			async getLike(e,i,k = null){
				const _this = this;
				let id = e.id;
				this.$u.debounce(async() => {
					let {
						code,
						data
					} = await commentLike({
						id:id
					})
					let e = _this.commentList[i]
					if(k != null)e.sons[k];
					if(parseInt(data) == 1){
						e.like+=1;
						e.is_like = true;
					}else{
						e.like-=1;
						e.is_like = false;
					}
				}, 500)
			}
		},
		watch: {
			id: {
				handler(n, o) {
					this.queryCommentListsFun()
				}
			}
		}
	}
</script>

<style lang="scss">
	.content-area {
		background: url('https://resource.lanbaozixun.com/uploads/images/20240807220844fe7b48490.png') no-repeat;
		background-size: 100% auto;
		background-color: #F7F7F7;

		.comment {
			display: flex;
			padding-bottom: 10px;

			.left {
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					background-color: #f2f2f2;
				}
			}

			.right {
				flex: 1;
				padding-left: 20rpx;
				font-size: 30rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.highlight {
						color: #5677fc;

						.num {
							color: #5677fc;
						}
					}
				}

				.content {
					margin-bottom: 10rpx;
				}

				.reply-box {
					border-radius: 12rpx;

					.item {
						padding: 20rpx 0;

						.username {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.all-reply {
						padding: 20rpx;
						display: flex;
						color: #666666;
						align-items: center;

						.more {
							margin-left: 6rpx;
						}
					}
				}

				.bottom {
					margin-top: 20rpx;
					display: flex;
					font-size: 24rpx;
					color: #9a9a9a;

					.reply {
						color: #5677fc;
						margin-left: 10rpx;
					}
				}
			}
		}

		.like {
			display: flex;
			align-items: center;

			.num {
				margin-right: 4rpx;
			}
		}
		
		.title{
			color: #0484FF;
			position: relative;
		}
		
		.title::before{
			content: '';
			left: -18rpx;
			width: 16rpx;
			height: 48rpx;
			position: absolute;
			background: #0484FF;
			border-radius: 0 50rpx 50rpx 0;
		}
	}
</style>